<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.lb{
				width: 640px;
				height: 280px;
				margin: 20px auto;
				border: 10px  ;
			}
			#left{
				position: relative;
				display: block;
				top: -200px;
				
			}
			#right{
				position: relative;
				display: block;
				top: -280px;
				right: -600px;
				
			}
			#img{
				width: 640px;
				height: 280px;
			}
			#num-btu span{
				background-color: #F0F8FF;
				width: 23.2px;
				display: inline-block;
				font-size: 20px;
				text-align: center;
				position: relative;
				border-radius: 50%;
				top: -180px;
				right: -400px;
				color: #A52A2A;
				cursor: pointer;  
                transition: all 0.1s;
				}
            #num-btu span:hover{ 
            	background-color: bisque;
                transform: scale(1.4);  
            }  
		</style>
	</head>
	<body>
		<div class="lb">
			<img src="img/1.jpg"id="img" />
		   <img src="img/arrow-left.png" id="left" />
		   <img src="img/arrow-right.png" id="right"/>
		   <div id="num-btu"><span style="background:#f00">1</span><span >2</span><span >3</span><span >4</span><span >5</span><span >6</span><span >7</span></div>
		</div>
		<script type="text/javascript">
		var left=document.getElementById("left");
		var right=document.getElementById("right")
			var img=document.getElementById("img");
			var list=document.getElementById("num");
			var index=1;
			/*var btns= getChildren("num-btn",span)//获取num-btn下面span的值。
			function getChildren(id,tagname){
				var arr=document.getElementById("id").childNodes;//函数获取childNodes的值，既span的值；
				var ele=[];
			}*/  
			//图片跟数字一起跳动；
			var btns=document.getElementById("num-btu").childNodes;//取值去num-btu这个ID下的孩子的值既span的值
			for( var i=0;i<btns.length;i++){
				btns[i].onclick=(function(){
					var j=i+1;
					return function () {
                    index=j;
                    img.src="img/"+index+".jpg"
                    changebg();
					}
				})();
			}
			//
			function changebg(){
				for(var i=0;i<btns.length;i++){//图片跟数字一起跳动时在div数字里代码的空格要删除。不能出现空格和回车
					btns[i].style.background= "#000";//原有背景色。
				}
				btns[index - 1].style.background= "";//替换背景色
			}
			var moveleft=function(){//点击下一张图片。
				index++;
				if(index>7)index=1;
				img.src="img/"+index+".jpg"
				changebg();
			}
			left.onclick=moveleft;
			right.onclick=function(){
				index--;
				if(index<1)index=7;
				img.src="img/"+index+".jpg"
				changebg();
			}
			//图片1s后自动跳动
			var timer=setInterval(moveleft,1000);
			var lb=document.getElementsByClassName("lb")[0];
			 // 鼠标划过时停止自动播放  
			lb.onmouseover=function(){
				clearInterval(timer);
			}
			// 鼠标离开整时继续播放至下一张 
			lb.onmouseout=function(){
				timer=setInterval(moveleft,1000);
			}
			
			
		</script>
	</body>
</html>
